﻿@model IEnumerable<Heima8.OA.Model.UserInfo>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*<link href="~/Content/tableStyle.css" rel="stylesheet" />*@
    
    <link href="~/Content/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" />

    <script src="~/Content/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script src="~/Content/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script src="~/Content/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/datapattern.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript">
        $(function () {
            initTable();

            $("#addDialogDiv").css("display", "none");
            $("#editDialogDiv").css("display", "none");
            $("#setRoleDialogDiv").css("display", "none");
            $("#setActionDialogDiv").css("display", "none");
            
            bindSearchBtnClick();

        });

        //绑定搜索查询事件
        function bindSearchBtnClick() {
            $("#btnSearch").click(function() {
                var data= {schName:$("#txtSchName").val(),schRemark:$("#txtSchReamrk").val()};
                initTable(data);
            });
        }

        //初始化表格
        function initTable(queryParam) {
            $('#tt').datagrid({
                url: '/UserInfo/GetAllUserInfos',//rows:一页有多少条，page：请求当前页
                title: '用户信息列表',
                width: 700,
                height: 400,
                fitColumns: true,
                idField: 'ID',
                loadMsg: '正在加载用户的信息...',
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30],
                queryParams: queryParam,//让表格在加载数据的时候，额外传输的数据。
                columns: [[
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
                    { field: 'ID', title: '用户的编号', width: 80 },
                    { field: 'UName', title: '用户名', width: 120 },
                    { field: 'Pwd', title: '密码', width: 120 },
                    { field: 'Remark', title: '备注', width: 120 },
                    {
                        field: 'SubTime', title: '提交时间', width: 80, align: 'right',
                        formatter: function (value, row, index) {
                            return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d h:m:s");
                        }
                    },
                    {
                        field: 'ModfiedOn', title: '操作', width: 120, formatter: function (value, row, index) {
                            var str = "";
                            str += "<a href='javascript:void(0)' class='editLink' uid='" + row.ID + "'>修改</a> &nbsp;&nbsp;";
                            str += "<a href='javascript:void(0)' class='deletLink' uid='" + row.ID + "'>删除</a>";
                            return str;
                        }
                    }
                ]],
                toolbar: [{
                    id: 'btnDownShelf',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        //alert("dd");
                        //弹出一个添加的对话框
                        addClickEvent();
                    }
                }, {
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        deleteEvent();
                    }
                }, {
                    id: 'btnEdit',
                    text: '修改',
                    iconCls: 'icon-edit',
                    handler: function () {
                        //校验你是否只选中一个 用户
                        var selectedRows = $('#tt').datagrid("getSelections");
                        if (selectedRows.length != 1) {
                            //error,question,info,warning.
                            $.messager.alert("错误提醒", "请选中1行要修改数据！", "question");
                            return;
                        }

                        editEvent(selectedRows[0].ID);
                    }
                }, {
                    id: 'btnSetRole',
                    text: '设置角色',
                    iconCls: 'icon-redo',
                    handler: function () {
                        //判断是否选中一个用户进行角色设置。弹出一个设置角色的对话框出来。
                        setRole();
                    }
                } , {
                    id: 'btnSetAction',
                    text: '设置特殊权限',
                    iconCls: 'icon-redo',
                    handler: function () {
                        //判断是否选中一个用户进行角色设置。弹出一个设置角色的对话框出来。
                        setAction();
                    }
                }],
                onHeaderContextMenu: function (e, field) {

                },
                onLoadSuccess: function(data) {
                    $(".editLink").click(function () {//
                        editEvent($(this).attr("uid"));
                        return false;
                    });
                }
            });
        }

        //设置特殊权限
        function setAction() {
            var selectedRows = $('#tt').datagrid("getSelections");
            if (selectedRows.length != 1) {
                //error,question,info,warning.
                $.messager.alert("错误提醒", "请选中一个用户进行设置权限！", "question");
                return;
            }

            $("#setActionFrame").attr("src", "/UserInfo/SetAction/" + selectedRows[0].ID);

            //弹出设置权限的对话框
            $("#setActionDialogDiv").css("display", "block");
            $("#setActionDialogDiv").dialog({
                title: "设置用户特殊权限",
                modal: true,
                width: 600,
                height: 500,
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true
            });
        }

        //设置角色成功之后关闭对话框
        function afterSetRole() {
            $("#setRoleDialogDiv").dialog("close");
        }

        // 设置用户角色
        function setRole() {
            var selectedRows = $('#tt').datagrid("getSelections");
            if (selectedRows.length != 1) {
                //error,question,info,warning.
                $.messager.alert("错误提醒", "请选中一个用户进行设置角色！", "question");
                return;
            }

            $("#setRoleFrame").attr("src", "/UserInfo/SetRole/" + selectedRows[0].ID);

            //弹出设置角色对话框
            $("#setRoleDialogDiv").css("display", "block");
            $("#setRoleDialogDiv").dialog({
                title: "设置用户角色",
                modal: true,
                width: 400,
                height: 400,
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                buttons: [{
                    id: 'btnOk',
                    text: '设置',
                    iconCls: 'icon-ok',
                    handler: function() {
                        $("#setRoleFrame")[0].contentWindow.submitForm();
                    }
                }, {
                    id: 'btnCancel',
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $("#setRoleDialogDiv").dialog("close");
                    }
                }]
            });
        }

        //修改
        function editEvent(id) {
           
            //给editFrame  的src属性做一个赋值
            $("#editFrame").attr("src", "/UserInfo/Edit/" +id);

            $("#editDialogDiv").css("display", "block");
            $("#editDialogDiv").dialog({
                title: "修改用户",
                modal: true,
                width: 400,
                height: 400,
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                buttons: [{
                    id: 'btnOk',
                    text: '修改',
                    iconCls: 'icon-ok',
                    handler: function() {
                        $("#editFrame")[0].contentWindow.submitForm();
                    }
                }, {
                    id: 'btnCancel',
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $("#editDialogDiv").dialog("close");
                    }
                }]
            });
        }
        //修改成功之后由子容器来调用的
        function afterEditSuccess() {
            $("#editDialogDiv").dialog("close");
            initTable();
        }

        //删除按钮被点击的时候执行。
        function deleteEvent() {
            //第一步拿到  easyui里面的选中的项
            var selectedRows = $('#tt').datagrid("getSelections");
            if (selectedRows.length <= 0) {
                //error,question,info,warning.
                $.messager.alert("错误提醒", "请选中删除数据！", "question");
                return;
            }

            var ids = "";
            // 把数据删除
            for (var key in selectedRows) {
                ids = ids + selectedRows[key].ID + ",";
            }
            //ids:     1,2,       4,5,6,
            ids = ids.substr(0, ids.length - 1);
            
            $.post("/UserInfo/Delete", { ids: ids }, function(data) {
                if (data == "ok") {
                    //刷新表格
                    initTable();
                } else {
                    $.messager.alert("提醒消息", "败了", "error");
                }
            });

        }

        //当用户点击添加时候，弹出一个添加的对话框
        function addClickEvent() {
            $("#addDialogDiv").css("display", "block");
            $("#addDialogDiv").dialog({
                title: "添加用户",
                modal: true,
                width: 400,
                height: 400,
                collapsible: true,
                minimizable: true,
                maximizable: true,
                resizable: true,
                buttons: [{
                        id: 'btnOk',
                        text: '添加',
                        iconCls: 'icon-ok',
                        handler:subAddForm 
                    }, {
                        id: 'btnCancel',
                        text: '取消',
                        iconCls: 'icon-cancel',
                        handler: function () {
                            $("#addDialogDiv").dialog("close");
                        }
                    }]
            });
        }
        
        //把表单提交到后台。
        function subAddForm() {
            $("#addDialogDiv form").submit();
        }

        //添加成功过之后执行的代码
        function afterAdd(data) {
            if (data == "ok") {
                //关闭对话框刷新表格
                $("#addDialogDiv").dialog("close");
                initTable();
            } else {
                $.messager.alert(data);
            }
        }
    </script>
</head>
    <body>
        <div>
            用户名： <input type="text" id="txtSchName" name="txtSchName" /> 备注：<input type="text" name="txtSchReamrk" id="txtSchReamrk"/> <input type="button" id="btnSearch" value="搜索"/>
        </div>
        

        @*当前页面放表格数据的地方*@
        <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit">
        </table>

        <!----------------弹出来的添加的 对话框- 开始------------>
        <div id="addDialogDiv">
            @using (Ajax.BeginForm("Add","UserInfo",new AjaxOptions(){OnSuccess = "afterAdd"}))
            {
                <table class="t3">
                    <tr>
                        <td>用户名：</td><td><input type="text" name="UName"/></td>
                    </tr>   
                    <tr>
                        <td>密码：</td><td><input type="text" name="Pwd"/></td>
                    </tr>     
                    <tr>
                        <td>备注：</td><td><input type="text" name="Remark"/></td>
                    </tr>     
                    <tr>
                        <td>昵称：</td><td><input type="text" name="ShowName"/></td>
                    </tr>     
                </table>
            }
        </div>
        <!----------------弹出来的添加的 对话框- 结束------------>
    

        <!----------------弹出来的修改的 对话框- 开始------------>
        <div id="editDialogDiv">
            <iframe id="editFrame" src="javascript:void(0)" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
        </div>
        <!----------------弹出来的修改的 对话框- 结束------------>
    
    
        <!----------------弹出来设置角色 对话框- 开始------------>
        <div id="setRoleDialogDiv">
            <iframe id="setRoleFrame" src="javascript:void(0)" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
        </div>
        <!----------------弹出来设置角色 对话框- 结束------------>
        
           <!----------------弹出来设置特殊权限的 对话框- 开始------------>
        <div id="setActionDialogDiv">
            <iframe id="setActionFrame" src="javascript:void(0)" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
        </div>
        <!----------------弹出来的修改的 对话框- 结束------------>
    </body>
</html>
